import React, { useState } from 'react'

class Control extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'jam'
        }
    }
    changeValue(ev) {
        this.setState({ name: ev.target.value })
    }
    render() {
        // 受控表单组件，依赖于组件
        // 数据被组件state管理起来
        /**
         * 双向绑定：
         * 1. 表单绑定value属性值为state的值，组件 --> 用户
         * 2. 用户通过操作input触发onChange事件修改state值，用户 --> 组件
         */
        return (
            <div className="noControl">
                <input
                    type="text"
                    value={this.state.name}
                    onChange={(ev) => { this.changeValue(ev) }}
                    onBlur = {()=>{console.log(this.state.name)}}
                />
            </div>
        )
    }
}



// 函数形式的受控组件
// function Control(props) {
//     let [name, setName] = useState('jam')
//     return (
//         <div>
//             <input
//                 type="text"
//                 value={name}
//                 onChange = { e => {setName(e.target.value)}}
//                 onBlur = {()=>{console.log(name)}}
//             />
//         </div>
//     )
// }
export default Control